<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div[name = sbox]{
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
            background: red;
        }
        div[name]{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .item:first-child{
            color: red;
        }
        .item-list:first-child{
            color: blue;
        }
        .item:nth-child(3){
            color: green;
        }
        .item:last-child{
            color: palevioletred;
        }

        .s-item:nth-child(-n+2){
            color: red;
        }
        .s-item:nth-last-child(-n+2){
            color: blue;
        }
        .last-dom::before{
            content:'你好';
            font-size:30px;
            color: red;
        }
        .last-dom::after{
            content:"最后这个不好";
            font-size: 30px;
            color: blue;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="box" name="sbox"></div>
    <div name="mbox"></div>
    <div class="list">
        <div class="item">
            <div class="dd"></div>
            <div class="item-list">第一个</div>
            111
        </div>
        <div class="item">
            <div class="item-list">第二个</div>
            111
        </div>
        <div class="item">111</div>
        <div class="item">111</div>
        <div class="item">111</div>
    </div>
    <div class="m-list">
        <div class="s-item last-dom">第一个</div>
        <div class="s-item ds">第二个</div>
        <div class="s-item">第三个</div>
        <div class="s-item">第四个</div>
    </div>
    <div class="last-dom" id="jsdom">复古风德国发动</div>
    <script>
        // css1-2选择器。class id tag选择器  *同配符选择器   div.box  div[attribute = ""] div[attribute] 属性选择器
        // css3选择器  :first-child 选择第一个元素  :nth-child() 选择器 不是从0开始查的 last-child最后一个
        //            nth-child(2n+1)   n从0开始查  2n+1 奇数的odd  2n+2 偶数even -n+2前两个  
        // nth-last-child(2) 倒着查 -n+num   末尾后num位
        //:before  :after 选择器向选定的元素前后插入内容。
        var jsdom = document.getElementById('jsdom');
        jsdom.onclick = function(){
            console.log(jsdom.style)
            this.innerHTML = "挺好的"
        }
    </script>
</body>
</html>